<!DOCTYPE html>
<html lang="zh-CN">
<!--浏览器搞笑标题-->
<script type="text/javascript" src="/js/FunnyTitle.js"></script>






<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/binblog/img/binblog.ico">
  <link rel="icon" type="image/png" href="/binblog/img/binblog.ico">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="leo-bin">
  <meta name="keywords" content="">
  <title>如何打造带域名的永久个人专属博客 - 阿斌的个人博客</title>

  <link  rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.staticfile.org/github-markdown-css/4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/binblog/lib/hint/hint.min.css" />

  
    <link  rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/10.0.0/styles/dracula.min.css" />
  

  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_yg9cfy8wd6.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_pjno9b9zyxs.css">


<link  rel="stylesheet" href="/binblog/css/main.css" />

<!-- 自定义样式保持在最底部 -->


<meta name="generator" content="Hexo 4.2.1"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/binblog/">&nbsp;<strong>Abin的Blog</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/binblog/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/binblog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/binblog/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/binblog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/binblog/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="view intro-2" id="background" parallax=true
         style="background: url('/binblog/img/6.webp') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="container text-center white-text fadeInUp">
            <span class="h2" id="subtitle">
              
            </span>

            
              
  <div class="mt-3 post-meta">
    <i class="iconfont icon-date-fill" aria-hidden="true"></i>
    <time datetime="2020-07-13 12:06">
      2020年7月13日 中午
    </time>
  </div>


<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      6.3k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      80
       分钟
    </span>
  

  
  
    
      <!-- LeanCloud 统计文章PV -->
      <span id="leancloud-post-views-container" class="post-meta" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="leancloud-post-views"></span> 次
      </span>
    
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid">
  <div class="row">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-md">
      <div class="container nopadding-md" id="board-ctn">
        <div class="py-5" id="board">
          <div class="post-content mx-auto" id="post">
            
              <p class="note note-info">
                
                  本文最后更新于：2020年7月14日 上午
                
              </p>
            
            <article class="markdown-body">
              <h1 id="如何打造带域名的永久个人专属博客"><a href="#如何打造带域名的永久个人专属博客" class="headerlink" title="如何打造带域名的永久个人专属博客"></a>如何打造带域名的永久个人专属博客</h1><h2 id="前言（废话）"><a href="#前言（废话）" class="headerlink" title="前言（废话）"></a>前言（废话）</h2><p>虽然现在已经有很多博客网站，以至于自己当初也在犹豫到底要不要自己费劲搭一个。</p>
<p>怎么说呢，使用别人的博客网站确实很方便，也不用自己去维护图床和资源了。</p>
<p>如果说你没有特殊的要求的话，使用免费的挺好的。</p>
<p>但是呢，作为一个有理想，有热情的程序员（闲的蛋疼），如何手把手自己搭建一个专属博客还是很有必要di。</p>
<h2 id="最终要完成的目标"><a href="#最终要完成的目标" class="headerlink" title="最终要完成的目标"></a>最终要完成的目标</h2><p><strong>1.使用GitHub或者码云实现云托管文章资源，实现自动化部署。</strong></p>
<p><strong>2.博客自带域名，并加上Https。</strong></p>
<p><strong>3.自带免费图床+本地MD编辑器一键上传图片资源。</strong></p>
<p><strong>4.博客实现免费评论系统。</strong></p>
<p><strong>5.代码高亮，访问量统计，文章搜索导航等等。。。</strong></p>
<h2 id="说明"><a href="#说明" class="headerlink" title="说明"></a>说明</h2><p><strong>1.博客完全使用<code>Hexo</code>搭建！</strong></p>
<p><strong>2.操作系统是<code>Windows10</code>。</strong></p>
<p><strong>3.本博客使用<code>码云</code>自动托管。</strong></p>
<p><strong>4.本博客使用阿里的<code>OSS</code>作为免费图床。</strong></p>
<p><strong>5.本博客使用最热门的MD编辑器<code>Typora</code>编辑。</strong></p>
<p><strong>6.使用<code>PicGo</code>整合Typora实现一键上传图片。</strong></p>
<p><strong>7.以上提到的所有技术和工具都是免费的，只要按照步骤一步一步来是没问题的。</strong></p>
<h2 id="最终实现的效果"><a href="#最终实现的效果" class="headerlink" title="最终实现的效果"></a>最终实现的效果</h2><p><strong>1.首页：</strong></p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714001926418.png" srcset="/binblog/img/loading.gif" alt="image-20200714001926418"></p>
<p><strong>2.下拉查看文章细节👇：</strong></p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714002059219.png" srcset="/binblog/img/loading.gif" alt="image-20200714002059219"></p>
<p><strong>3.文章细节：</strong></p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714002159272.png" srcset="/binblog/img/loading.gif" alt="image-20200714002159272"></p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714002223662.png" srcset="/binblog/img/loading.gif" alt="image-20200714002223662"></p>
<p><strong>更多细节欢迎查看我的博客！      <a href="https://leobins.gitee.io/binblog/">https://leobins.gitee.io/binblog/</a></strong></p>
<h2 id="环境搭建"><a href="#环境搭建" class="headerlink" title="环境搭建"></a>环境搭建</h2><h3 id="1）准备工作"><a href="#1）准备工作" class="headerlink" title="1）准备工作"></a>1）准备工作</h3><p><strong>安装Hexo之前还需要提前准备以下的环境</strong></p>
<p>1.提前注册一个码云的账号并熟悉如何创建仓库。               <a href="https://gitee.com/" target="_blank" rel="noopener">https://gitee.com/</a></p>
<p>2.windows上面需要安装配置node.js，npm（安装了node会自带npm）并且了解相关命令。        <a href="http://nodejs.cn/" target="_blank" rel="noopener">http://nodejs.cn/</a></p>
<p>3.windows上面需要配置还git的环境，并且熟悉一点命令。</p>
<p>4.提前准备好一个本地MD编辑器，这里推荐Typora。          <a href="https://www.typora.io/" target="_blank" rel="noopener">https://www.typora.io/</a></p>
<p>5.这些提到的工具版本都无所谓，最新的都行。</p>
<h3 id="2）安装Hexo"><a href="#2）安装Hexo" class="headerlink" title="2）安装Hexo"></a>2）安装Hexo</h3><p><strong>官网地址：</strong>   <a href="https://hexo.io/" target="_blank" rel="noopener">https://hexo.io/</a></p>
<p><strong>1.使用命令安装</strong></p>
<div class="hljs"><pre><code class="hljs bash">npm install -g hexo</code></pre></div>
<p><strong>2.找一个文件夹用来配置hexo</strong></p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714004258569.png" srcset="/binblog/img/loading.gif" alt="image-20200714004258569"></p>
<p><strong>3.现在开cmd（管理员模式下）然后进入刚刚创建的文件夹下：</strong></p>
<div class="hljs"><pre><code class="hljs bash"><span class="hljs-built_in">cd</span> C:\随笔文章\MyBlog\hexo</code></pre></div>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714004528125.png" srcset="/binblog/img/loading.gif" alt="image-20200714004528125"></p>
<p><strong>4.现在初始化hexo：</strong></p>
<div class="hljs"><pre><code class="hljs bash">hexo init</code></pre></div>
<p>接下来就等hexo下载并自动配置啦！</p>
<p>配置好之后是这样子：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714004833519.png" srcset="/binblog/img/loading.gif" alt="image-20200714004833519"></p>
<p>其中比较重要的几个文件夹已经标红了，都是之后需要配置的。</p>
<h3 id="3）启动并预览hexo"><a href="#3）启动并预览hexo" class="headerlink" title="3）启动并预览hexo"></a>3）启动并预览hexo</h3><div class="hljs"><pre><code class="hljs bash">hexo g <span class="hljs-comment">#编译源文章</span>
hexo s <span class="hljs-comment">#本地启动hexo服务</span></code></pre></div>
<p><code>hexo s</code>是开启本地预览服务，打开浏览器访问 <a href="http://localhost:4000/" target="_blank" rel="noopener">http://localhost:4000</a> 即可看到内容</p>
<p><strong>注意：</strong></p>
<p>很多人会碰到浏览器一直在转圈但是就是加载不出来的问题，一般情况下是因为端口占用的缘故，因为4000这个端口太常见了，解决端口冲突问题请参考这篇文章：<a href="http://blog.liuxianan.com/windows-port-bind.html" target="_blank" rel="noopener">http://blog.liuxianan.com/windows-port-bind.html</a></p>
<p>第一次初始化的时候<strong>hexo</strong>已经帮我们写了一篇名为 Hello World 的文章，用的是默认主题</p>
<h2 id="选主题"><a href="#选主题" class="headerlink" title="选主题"></a>选主题</h2><p>默认主题很丑，但是官方给我们提供了很多开源的主题，大部分的主题都有配套的教程的。</p>
<p>主题地址：      <a href="https://hexo.io/themes/" target="_blank" rel="noopener">https://hexo.io/themes/</a></p>
<p>这里用的是一款叫做<code>Fluid</code>的主题，感觉不错，推荐。</p>
<p>文档地址： <a href="https://hexo.fluid-dev.com/docs/" target="_blank" rel="noopener">https://hexo.fluid-dev.com/docs/</a></p>
<p><strong>如何下载</strong></p>
<p><strong>先下载源码包：</strong></p>
<p><a href="https://github.com/fluid-dev/hexo-theme-fluid/releases" target="_blank" rel="noopener">https://github.com/fluid-dev/hexo-theme-fluid/releases</a></p>
<p>下拉找到Assets栏，然后下载压缩包：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714010128898.png" srcset="/binblog/img/loading.gif" alt="image-20200714010128898"></p>
<p><strong>然后将安装包解压并放到之前hexo里面的主题文件夹下：</strong></p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714010226395.png" srcset="/binblog/img/loading.gif" alt="image-20200714010226395"></p>
<p>下载好主题之后我们就可以配置这个主题啦</p>
<h2 id="配置主题"><a href="#配置主题" class="headerlink" title="配置主题"></a>配置主题</h2><p>说明：</p>
<p>hexo一共会出现两种配置文件都叫：_config.yml</p>
<p>一个是hexo自带的核心配置文件：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714092119744.png" srcset="/binblog/img/loading.gif" alt="image-20200714092119744"></p>
<p>一个主题提供者自带的主题配置文件：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714092202057.png" srcset="/binblog/img/loading.gif" alt="image-20200714092202057"></p>
<h2 id="整合码云"><a href="#整合码云" class="headerlink" title="整合码云"></a>整合码云</h2><p>首先你要创建一个仓库，除了仓库名字之外其他都默认就行。</p>
<p>至于仓库名字建议你先想好再创，比如这里我的就是：<strong>binblog</strong></p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714093243188.png" srcset="/binblog/img/loading.gif" alt="image-20200714093243188"></p>
<p><strong>到这里就基本没啥问题了，现在只需要将博客和码云上的项目关联就行了。</strong></p>
<p>我们修改下hexo自带的核心配置文件：（记事本就能直接打开的）</p>
<div class="hljs"><pre><code class="hljs yaml"><span class="hljs-comment"># Hexo Configuration</span>
<span class="hljs-comment"># 省略了上下文。。。。</span>

<span class="hljs-comment"># 博客首页配置</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">小斌的个人博客</span>
<span class="hljs-attr">author:</span> <span class="hljs-string">leo-bin</span>
<span class="hljs-attr">language:</span> <span class="hljs-string">zh-CN</span>

<span class="hljs-comment"># 博客域名配置</span>
<span class="hljs-attr">url:</span> <span class="hljs-string">https://leobins.gitee.io/binblog</span>
<span class="hljs-attr">root:</span> <span class="hljs-string">/binblog</span>

<span class="hljs-comment"># 主题选择</span>
<span class="hljs-comment">#theme: landscape</span>
<span class="hljs-attr">theme:</span> <span class="hljs-string">fluid</span>

<span class="hljs-comment"># 部署配置</span>
<span class="hljs-attr">deploy:</span>
  <span class="hljs-attr">type:</span> <span class="hljs-string">git</span>
  <span class="hljs-attr">repository:</span> <span class="hljs-string">https://gitee.com/leobins/binblog.git</span>
  <span class="hljs-attr">branch:</span> <span class="hljs-string">master</span>
 
<span class="hljs-comment"># 省略了上下文。。。。</span></code></pre></div>
<p>照着上面的格式去改就行，比如博客的标题当然自己起</p>
<p>然后域名的话，你按照我的格式来改就行，前缀是一样的，就是后面带上<code>仓库名字</code>就行：</p>
<div class="hljs"><pre><code class="hljs tex">https://leobins.gitee.io/你的仓库名字</code></pre></div>
<p>主题自然选择你刚刚选择的主题的名字咯。</p>
<p>部署这里很简单，直接用你刚刚创建的项目地址就行，大家只要参照我的配置就行，但是要修改仓库地址。</p>
<p>不知道怎么看？我教你！</p>
<p>直接点项目中的<strong>克隆下载</strong>就行：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714093602289.png" srcset="/binblog/img/loading.gif" alt="image-20200714093602289"></p>
<p>接下来我们修改主题的配置文件，来DIY一波！</p>
<div class="hljs"><pre><code class="hljs yaml"><span class="hljs-comment">#---------------------------</span>
<span class="hljs-comment"># 全局</span>
<span class="hljs-comment"># Site</span>
<span class="hljs-comment">#---------------------------</span>
<span class="hljs-attr">favicon:</span> <span class="hljs-string">/img/binblog.ico</span> <span class="hljs-comment"># 网站标签页的 icon</span>

<span class="hljs-attr">apple_touch_icon:</span> <span class="hljs-string">/img/binblog.ico</span> <span class="hljs-comment"># 用于苹果设备的 icon</span>

<span class="hljs-attr">title_join_string:</span> <span class="hljs-string">' - '</span>  <span class="hljs-comment"># 浏览器标签页中的标题分隔符，效果： 文章名 - 站点名</span>

<span class="hljs-attr">force_https:</span> <span class="hljs-literal">false</span>  <span class="hljs-comment"># 强制所有链接升级为 HTTPS（适用于图片等资源出现 HTTP 混入报错）</span>

<span class="hljs-attr">highlight:</span> <span class="hljs-comment"># 代码高亮</span>
  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span> 
  <span class="hljs-comment">#style: 'Github Gist'  # 高亮样式见：https://highlightjs.org/static/demo/  在页面挑选 style 填入</span>
  <span class="hljs-comment">#style: 'Atom One Dark Reasonable'</span>
  <span class="hljs-attr">style:</span> <span class="hljs-string">'Dracula'</span>
  <span class="hljs-attr">bg_color:</span> <span class="hljs-literal">true</span>  <span class="hljs-comment"># 是否根据 style 改变代码背景色，**如果 style 是深色背景别忘了开启此项**</span>
  <span class="hljs-attr">copy_btn:</span> <span class="hljs-literal">true</span>  <span class="hljs-comment"># 是否开启复制代码的按钮</span>

<span class="hljs-attr">fun_features:</span> <span class="hljs-comment"># 一些好玩的功能</span>
  <span class="hljs-attr">typing:</span> <span class="hljs-comment"># 为 subtitle 添加打字机效果</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
    <span class="hljs-attr">typeSpeed:</span> <span class="hljs-number">70</span>  <span class="hljs-comment"># 打印速度，数字越大越慢</span>
    <span class="hljs-attr">cursorChar:</span> <span class="hljs-string">"_"</span> <span class="hljs-comment"># 游标字符</span>
    <span class="hljs-attr">loop:</span> <span class="hljs-literal">false</span> <span class="hljs-comment"># 是否循环播放效果</span>
  <span class="hljs-attr">anchorjs:</span> <span class="hljs-comment"># 为文章内容中的标题添加锚图标</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
    <span class="hljs-attr">element:</span> <span class="hljs-string">h1,h2,h3,h4,h5,h6</span>
    <span class="hljs-attr">placement:</span> <span class="hljs-string">right</span> <span class="hljs-comment"># icon放置的位置： left | right</span>
    <span class="hljs-attr">visible:</span> <span class="hljs-string">hover</span> <span class="hljs-comment"># 默认悬浮显示，可选：hover（鼠标在元素上悬浮时显示） | always（一直显示） | touch（移动端触摸显示）</span>
    <span class="hljs-attr">icon:</span> <span class="hljs-string">""</span> <span class="hljs-comment"># 可选：§ | # | ❡ 等，留空则为默认效果</span>
  <span class="hljs-attr">mouse_click:</span>  <span class="hljs-comment"># 鼠标点击动效</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">false</span>
    <span class="hljs-attr">style:</span> <span class="hljs-string">values</span> <span class="hljs-comment"># 目前设置两个值：values（价值观词汇） | love（爱心）</span>

<span class="hljs-attr">color:</span>  <span class="hljs-comment"># 主题颜色配置，不一定能每一处都生效，可能会被局部样式覆盖，这种情况建议用自定义 css 解决。配色可以在这获得启发： https://www.webdesignrankings.com/resources/lolcolors/</span>
  <span class="hljs-attr">body_bg_color:</span> <span class="hljs-string">"#eee"</span>             <span class="hljs-comment"># body 背景色</span>
  <span class="hljs-attr">navbar_bg_color:</span> <span class="hljs-string">"#2f4154"</span>        <span class="hljs-comment"># 顶部菜单背景色</span>
  <span class="hljs-attr">navbar_text_color:</span> <span class="hljs-string">"white"</span>        <span class="hljs-comment"># 顶部菜单字体色</span>
  <span class="hljs-attr">text_color:</span> <span class="hljs-string">"#3c4858"</span>             <span class="hljs-comment"># 全局字体色</span>
  <span class="hljs-attr">sec_text_color:</span> <span class="hljs-string">"#718096"</span>         <span class="hljs-comment"># 全局次级字体色（摘要、简介等位置）</span>
  <span class="hljs-attr">post_text_color:</span> <span class="hljs-string">"#2c3e50"</span>        <span class="hljs-comment"># 文章正文字体色</span>
  <span class="hljs-attr">post_heading_color:</span> <span class="hljs-string">"#1a202c"</span>     <span class="hljs-comment"># 文章标题标签字体色（h1 h2 h3...）</span>
  <span class="hljs-attr">link_color:</span> <span class="hljs-string">"#3c4858"</span>             <span class="hljs-comment"># 超链接字体色</span>
  <span class="hljs-attr">link_hover_color:</span> <span class="hljs-string">"#1abc9c"</span>       <span class="hljs-comment"># 超链接悬浮时字体色</span>
  <span class="hljs-attr">link_hover_bg_color:</span> <span class="hljs-string">"#f8f9fa"</span>    <span class="hljs-comment"># 超链接悬浮背景色</span>
  <span class="hljs-attr">board_color:</span> <span class="hljs-string">"#fff"</span>               <span class="hljs-comment"># 主面板背景色</span>

<span class="hljs-attr">font:</span>  <span class="hljs-comment"># 主题字体配置</span>
  <span class="hljs-attr">font_size:</span> <span class="hljs-string">17px</span>                   <span class="hljs-comment"># 全局字号</span>
  <span class="hljs-attr">font_family:</span>                      <span class="hljs-comment"># 全局字体</span>
  <span class="hljs-attr">code_font_size:</span> <span class="hljs-number">100</span><span class="hljs-string">%</span>               <span class="hljs-comment"># 代码的字号</span>

<span class="hljs-attr">custom_js:</span>   <span class="hljs-comment"># 指定自定义 js 文件路径，路径是相对 source 目录，如 /js/custom.js 对应存放目录 source/js/custom.js，支持列表</span>
<span class="hljs-attr">custom_css:</span>   <span class="hljs-comment"># 指定自定义 css 文件路径，路径是相对 source 目录，如 /css/custom.css 同上，支持列表</span>
<span class="hljs-attr">custom_html:</span> <span class="hljs-string">''</span>  <span class="hljs-comment"># 自定义底部 HTML 内容（位于 footer 上方），也可用于外部引入 js css 这些操作，注意不要和 post.custom 配置冲突</span>

<span class="hljs-attr">web_analytics:</span>  <span class="hljs-comment"># 网页访问统计</span>
  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
  <span class="hljs-attr">baidu:</span>  <span class="hljs-comment"># 百度统计的Key，参见 https://tongji.baidu.com/sc-web/10000033910/home/site/getjs?siteId=13751376 代码获取中 hm.js? 后边的字符串</span>
  <span class="hljs-attr">google:</span>  <span class="hljs-comment"># Google统计的Tracking ID，参见 https://analytics.google.com/analytics/web/</span>
  <span class="hljs-attr">tencent:</span>  <span class="hljs-comment"># 腾讯统计的H5 App id，参见 https://mta.qq.com/h5/manage/ctr_app_manage (开启高级功能才有cid)</span>
    <span class="hljs-attr">sid:</span>
    <span class="hljs-attr">cid:</span>
  <span class="hljs-attr">tajs:</span>   <span class="hljs-comment"># 腾讯统计早期版站点统计sID，参见 https://ta.qq.com/#/site/list</span>
  <span class="hljs-attr">woyaola:</span>  <span class="hljs-comment"># 51.la站点统计ID，参见 https://www.51.la/user/site/index</span>
  <span class="hljs-attr">cnzz:</span>  <span class="hljs-comment"># 友盟/cnzz站点统计web_id，参见 https://web.umeng.com/main.php?c=site&amp;a=show</span>
  <span class="hljs-attr">leancloud:</span>  <span class="hljs-comment"># LeanCloud 计数统计，可用于 PV UV 展示，如果 web_analytics.enable 没有开启，PV UV 展示只会查询，不会增加</span>
    <span class="hljs-attr">app_id:</span> <span class="hljs-string">这里填你的appid</span>
    <span class="hljs-attr">app_key:</span> <span class="hljs-string">这里填你的appkey</span>
    <span class="hljs-attr">server_url:</span>  <span class="hljs-comment"># REST API 服务器地址，国际版不填</span>

<span class="hljs-attr">lazyload:</span> <span class="hljs-comment"># 对页面中的图片进行懒加载处理，可见范围外的图片不会加载</span>
  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
  <span class="hljs-attr">onlypost:</span> <span class="hljs-literal">false</span>  <span class="hljs-comment"># 仅在文章页使用懒加载，开启后如果自定义页面需要使用，可以在 Front-matter 里指定 `lazyload: true`</span>

<span class="hljs-attr">daovoice:</span>  <span class="hljs-comment"># 在线客服 Daovoice 参考：http://dashboard.daovoice.io</span>
  <span class="hljs-attr">enable:</span> <span class="hljs-literal">false</span> <span class="hljs-comment"># 是否开启在线客服聊天</span>
  <span class="hljs-attr">appid:</span> <span class="hljs-string">''</span>  <span class="hljs-comment"># 应用ID设置</span>

<span class="hljs-attr">aplayer:</span>  <span class="hljs-comment"># 音乐播放器，注意不能与 hexo-tag-aplayer 插件共用</span>
  <span class="hljs-attr">enable:</span> <span class="hljs-literal">false</span>
  <span class="hljs-attr">autoplay:</span> <span class="hljs-literal">false</span>  <span class="hljs-comment"># 音频自动播放</span>
  <span class="hljs-attr">loop:</span> <span class="hljs-string">'all'</span>  <span class="hljs-comment"># 音频循环播放, 可选值: 'all', 'one', 'none'</span>
  <span class="hljs-attr">order:</span> <span class="hljs-string">'random'</span>  <span class="hljs-comment"># 播放顺序，可选值: 'list', 'random'</span>
  <span class="hljs-attr">theme:</span> <span class="hljs-string">'#b7daff'</span>  <span class="hljs-comment"># 主题色</span>
  <span class="hljs-attr">songs:</span>  <span class="hljs-comment"># 歌曲列表，必须传入下列各参数，其中 url 与 cover 在本地需存于 source 目录，更多参数见文档：https://aplayer.js.org/#/zh-Hans/?id=%E5%8F%82%E6%95%B0</span>
    <span class="hljs-bullet">-</span> <span class="hljs-string">&#123;</span> <span class="hljs-attr">name:</span> <span class="hljs-string">'name'</span><span class="hljs-string">,</span> <span class="hljs-attr">artist:</span> <span class="hljs-string">'artist'</span><span class="hljs-string">,</span> <span class="hljs-attr">url:</span> <span class="hljs-string">'/songs/test.mp3'</span><span class="hljs-string">,</span> <span class="hljs-attr">cover:</span> <span class="hljs-string">'/img/cover.jpg'</span> <span class="hljs-string">&#125;</span>
    <span class="hljs-bullet">-</span> <span class="hljs-string">&#123;</span> <span class="hljs-attr">name:</span> <span class="hljs-string">'name'</span><span class="hljs-string">,</span> <span class="hljs-attr">artist:</span> <span class="hljs-string">'artist'</span><span class="hljs-string">,</span> <span class="hljs-attr">url:</span> <span class="hljs-string">'https://...url.mp3'</span><span class="hljs-string">,</span> <span class="hljs-attr">cover:</span> <span class="hljs-string">'https://...cover.jpg'</span> <span class="hljs-string">&#125;</span>

<span class="hljs-attr">version:</span>  <span class="hljs-comment"># 主题版本相关</span>
  <span class="hljs-attr">check:</span> <span class="hljs-literal">false</span>  <span class="hljs-comment"># 每次生成页面后，检测主题是否为最新版本</span>

<span class="hljs-comment">#---------------------------</span>
<span class="hljs-comment"># 页头</span>
<span class="hljs-comment"># Header</span>
<span class="hljs-comment">#---------------------------</span>
<span class="hljs-attr">navbar:</span>
  <span class="hljs-attr">blog_title:</span> <span class="hljs-string">Bin‘s</span>   <span class="hljs-string">Blog</span> <span class="hljs-comment"># 导航栏左侧的标题，为空则按 hexo config.title 显示</span>
  <span class="hljs-attr">ground_glass:</span>  <span class="hljs-comment"># 导航栏毛玻璃特效，部分浏览器不支持会自动不生效</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
    <span class="hljs-attr">px:</span> <span class="hljs-number">3</span>  <span class="hljs-comment"># 模糊像素，只能为数字，数字越大模糊度越高</span>
    <span class="hljs-attr">alpha:</span> <span class="hljs-number">0.7</span>   <span class="hljs-comment"># 透明度，只能为数字，范围0~1，数字越大透明度越低，注意透明过度可能看不清菜单字体</span>
  <span class="hljs-attr">menu:</span>  <span class="hljs-comment"># 可自行增减，key 用来关联 languages/*.yml，如不存在关联则显示 key 本身的值；icon 是 css class，可以省略；增加 name 可以强制显示指定名称</span>
    <span class="hljs-bullet">-</span> <span class="hljs-string">&#123;</span> <span class="hljs-attr">key:</span> <span class="hljs-string">'home'</span><span class="hljs-string">,</span> <span class="hljs-attr">link:</span> <span class="hljs-string">'/'</span><span class="hljs-string">,</span> <span class="hljs-attr">icon:</span> <span class="hljs-string">'iconfont icon-home-fill'</span> <span class="hljs-string">&#125;</span>
    <span class="hljs-bullet">-</span> <span class="hljs-string">&#123;</span> <span class="hljs-attr">key:</span> <span class="hljs-string">'archive'</span><span class="hljs-string">,</span> <span class="hljs-attr">link:</span> <span class="hljs-string">'/archives/'</span><span class="hljs-string">,</span> <span class="hljs-attr">icon:</span> <span class="hljs-string">'iconfont icon-archive-fill'</span> <span class="hljs-string">&#125;</span>
    <span class="hljs-bullet">-</span> <span class="hljs-string">&#123;</span> <span class="hljs-attr">key:</span> <span class="hljs-string">'category'</span><span class="hljs-string">,</span> <span class="hljs-attr">link:</span> <span class="hljs-string">'/categories/'</span><span class="hljs-string">,</span> <span class="hljs-attr">icon:</span> <span class="hljs-string">'iconfont icon-category-fill'</span> <span class="hljs-string">&#125;</span>
    <span class="hljs-bullet">-</span> <span class="hljs-string">&#123;</span> <span class="hljs-attr">key:</span> <span class="hljs-string">'tag'</span><span class="hljs-string">,</span> <span class="hljs-attr">link:</span> <span class="hljs-string">'/tags/'</span><span class="hljs-string">,</span> <span class="hljs-attr">icon:</span> <span class="hljs-string">'iconfont icon-tags-fill'</span> <span class="hljs-string">&#125;</span>
    <span class="hljs-bullet">-</span> <span class="hljs-string">&#123;</span> <span class="hljs-attr">key:</span> <span class="hljs-string">'about'</span><span class="hljs-string">,</span> <span class="hljs-attr">link:</span> <span class="hljs-string">'/about/'</span><span class="hljs-string">,</span> <span class="hljs-attr">icon:</span> <span class="hljs-string">'iconfont icon-user-fill'</span> <span class="hljs-string">&#125;</span>
    <span class="hljs-comment">#- &#123; key: 'links', link: '/links/', icon: 'iconfont icon-link-fill' &#125;  # 友链页，把前面#去掉即可展示</span>

<span class="hljs-attr">search:</span> <span class="hljs-comment"># 搜索栏，基于 hexo-generator-search 插件，若已安装其他搜索插件请关闭此功能，以避免生成多余的索引文件。</span>
  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
  <span class="hljs-attr">path:</span> <span class="hljs-string">/local-search.xml</span> <span class="hljs-comment"># 文件引用地址，默认是下方生成位置，也可以将生成后的 local-search.xml 上传到其它位置引用，如：https://www.example.com/local-search.xml</span>
  <span class="hljs-attr">generate_path:</span> <span class="hljs-string">/local-search.xml</span> <span class="hljs-comment"># 文件生成位置，必须为相对位置</span>
  <span class="hljs-attr">field:</span> <span class="hljs-string">post</span>
  <span class="hljs-attr">content:</span> <span class="hljs-literal">true</span>

<span class="hljs-attr">scroll_down_arrow:</span>  <span class="hljs-comment"># 向下滚动的箭头</span>
  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
  <span class="hljs-attr">banner_height_limit:</span> <span class="hljs-number">90</span>  <span class="hljs-comment"># 头图高度不小于指定比例，才显示箭头</span>
  <span class="hljs-attr">scroll_after_turning_page:</span> <span class="hljs-literal">true</span>  <span class="hljs-comment"># 翻页后自动滚动</span>

<span class="hljs-attr">banner_parallax:</span> <span class="hljs-literal">true</span>  <span class="hljs-comment"># 头图滚动视差</span>


<span class="hljs-comment">#---------------------------</span>
<span class="hljs-comment"># 页脚</span>
<span class="hljs-comment"># Footer</span>
<span class="hljs-comment">#---------------------------</span>
<span class="hljs-attr">footer:</span>
  <span class="hljs-attr">statistics:</span>  <span class="hljs-comment"># 展示网站的 PV、UV 统计数</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
    <span class="hljs-attr">source:</span> <span class="hljs-string">"leancloud"</span>  <span class="hljs-comment"># 统计数据来源，可选：leancloud | busuanzi，使用 leancloud 需要在 web_analytics 中设置 api 参数，使用 busuanzi 注意可能间歇抽风</span>
    <span class="hljs-attr">pv_format:</span> <span class="hljs-string">"总访问量 &#123;&#125; 次"</span>  <span class="hljs-comment"># 显示的文本，&#123;&#125;是数字的占位符（必须包含)，下同</span>
    <span class="hljs-attr">uv_format:</span> <span class="hljs-string">"总访客数 &#123;&#125; 人"</span>

  <span class="hljs-attr">beian:</span>  <span class="hljs-comment"># The footer of China's website policy, other areas keep disable</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
    <span class="hljs-attr">icp_text:</span> <span class="hljs-string">京ICP证123456号</span> <span class="hljs-comment"># ICP证号</span>
    <span class="hljs-attr">police_text:</span> <span class="hljs-string">京公网安备12345678号</span> <span class="hljs-comment"># 公安备案号，不填则只显示ICP</span>
    <span class="hljs-attr">police_code:</span> <span class="hljs-number">12345678</span> <span class="hljs-comment"># 公安备案的编号，用于URL跳转查询</span>
    <span class="hljs-attr">police_icon:</span> <span class="hljs-string">/img/police_beian.png</span> <span class="hljs-comment"># 公安备案的图片. 为空时不显示备案图片</span>

<span class="hljs-attr">scroll_top_arrow:</span>  <span class="hljs-comment"># 向顶部滚动的箭头</span>
  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>

<span class="hljs-comment">#---------------------------</span>
<span class="hljs-comment"># 首页</span>
<span class="hljs-comment"># Index Page</span>
<span class="hljs-comment">#---------------------------</span>
<span class="hljs-attr">index:</span>
  <span class="hljs-attr">banner_img:</span> <span class="hljs-string">/img/8.webp</span>  <span class="hljs-comment"># 首页 Banner 头图，以下相同</span>
  <span class="hljs-attr">banner_img_height:</span> <span class="hljs-number">100</span>  <span class="hljs-comment"># 头图高度，屏幕百分比，available: 0 - 100</span>
  <span class="hljs-attr">banner_mask_alpha:</span> <span class="hljs-number">0.3</span>  <span class="hljs-comment"># 头图黑色蒙版的透明度，available: 0 - 1.0， 0 是完全透明（无蒙版），1 是完全不透明</span>
  <span class="hljs-attr">post_default_img:</span> <span class="hljs-string">''</span> <span class="hljs-comment"># 默认的文章封面图，当没有指定 index_img 时会使用该图片，若都为空则不显示任何图片</span>
  <span class="hljs-attr">slogan:</span>  <span class="hljs-comment"># 首页副标题的独立设置</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>  <span class="hljs-comment"># 为 false 则不显示任何内容</span>
    <span class="hljs-attr">text:</span> <span class="hljs-string">'每天早上醒来你都有两个选择，一是盖上被子继续做你没做完的梦，二是掀开被子去完成你未完成的梦。'</span>  <span class="hljs-comment"># 为空则按 hexo config.subtitle 显示</span>
  <span class="hljs-attr">auto_excerpt:</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
  <span class="hljs-attr">post_url_target:</span> <span class="hljs-string">_self</span>  <span class="hljs-comment"># available: _blank | _self</span>
  <span class="hljs-attr">post_meta:</span> <span class="hljs-comment"># 是否显示文章信息（时间、分类、标签）</span>
    <span class="hljs-attr">date:</span> <span class="hljs-literal">true</span>
    <span class="hljs-attr">category:</span> <span class="hljs-literal">true</span>
    <span class="hljs-attr">tag:</span> <span class="hljs-literal">true</span>

<span class="hljs-comment"># 通过 hexo new page 命令创建的页面</span>
<span class="hljs-comment"># Custom Page</span>
<span class="hljs-attr">page:</span>
  <span class="hljs-attr">banner_img:</span> <span class="hljs-string">/img/6.webp</span>
  <span class="hljs-attr">banner_img_height:</span> <span class="hljs-number">60</span>  <span class="hljs-comment"># available: 0 - 100</span>
  <span class="hljs-attr">banner_mask_alpha:</span> <span class="hljs-number">0.3</span>  <span class="hljs-comment"># available: 0 - 1.0</span>

<span class="hljs-comment">#---------------------------</span>
<span class="hljs-comment"># 文章页</span>
<span class="hljs-comment"># Post Page</span>
<span class="hljs-comment">#---------------------------</span>
<span class="hljs-attr">post:</span>  <span class="hljs-comment"># 部分配置同时控制自定义页面，注意备注</span>
  <span class="hljs-attr">banner_img:</span> <span class="hljs-string">/img/6.webp</span>
  <span class="hljs-attr">banner_img_height:</span> <span class="hljs-number">70</span>  <span class="hljs-comment"># available: 0 - 100</span>
  <span class="hljs-attr">banner_mask_alpha:</span> <span class="hljs-number">0.3</span>  <span class="hljs-comment"># available: 0 - 1.0</span>
  <span class="hljs-attr">meta:</span>  <span class="hljs-comment"># 文章标题下方的信息</span>
    <span class="hljs-attr">date:</span>  <span class="hljs-comment"># 文章日期</span>
      <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
      <span class="hljs-attr">format:</span> <span class="hljs-string">"LL a"</span>  <span class="hljs-comment"># 格式参照 ISO-8601 日期格式化，可参照 http://momentjs.cn/docs/#/parsing/string-format/</span>
    <span class="hljs-attr">wordcount:</span>  <span class="hljs-comment"># 字数统计</span>
      <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
      <span class="hljs-attr">format:</span> <span class="hljs-string">"&#123;&#125; 字"</span>  <span class="hljs-comment"># 显示的文本，&#123;&#125;是数字的占位符（必须包含)，下同</span>
    <span class="hljs-attr">min2read:</span>  <span class="hljs-comment"># 阅读时间</span>
      <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
      <span class="hljs-attr">format:</span> <span class="hljs-string">"&#123;&#125; 分钟"</span>
      <span class="hljs-attr">words:</span> <span class="hljs-number">100</span>  <span class="hljs-comment"># 每分钟阅读多少字，如果是技术文章，建议降低</span>
    <span class="hljs-attr">views:</span>  <span class="hljs-comment"># 阅读次数</span>
      <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
      <span class="hljs-attr">source:</span> <span class="hljs-string">"leancloud"</span>  <span class="hljs-comment"># 统计数据来源，可选：leancloud | busuanzi，使用 leancloud 需要在 web_analytics 中设置 api 参数，使用 busuanzi 注意可能间歇抽风</span>
      <span class="hljs-attr">format:</span> <span class="hljs-string">"&#123;&#125; 次"</span>
  <span class="hljs-attr">updated:</span>  <span class="hljs-comment"># 在文章开头显示文章更新时间，该时间默认是 md 文件更新时间，可通过 front-matter 中 `updated` 手动指定（和 date 一样格式）</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
    <span class="hljs-attr">content:</span> <span class="hljs-string">本文最后更新于：</span>  <span class="hljs-comment"># 描述文字</span>
    <span class="hljs-attr">relative:</span> <span class="hljs-literal">false</span>  <span class="hljs-comment"># 是否使用相对时间表示，比如："3 天前"</span>
  <span class="hljs-attr">toc:</span>  <span class="hljs-comment"># 文章右侧目录</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
    <span class="hljs-attr">headingSelector:</span> <span class="hljs-string">h1,h2,h3,h4,h5,h6</span>
    <span class="hljs-attr">collapseDepth:</span> <span class="hljs-number">0</span>  <span class="hljs-comment"># 层级的折叠深度，0 是全部折叠，6 是全部不折叠</span>
  <span class="hljs-attr">copyright:</span>  <span class="hljs-comment"># 版权声明</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
    <span class="hljs-attr">content:</span> <span class="hljs-string">'本博客所有文章除特别声明外，均采用 &lt;a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener"&gt;CC BY-SA 4.0 协议&lt;/a&gt; ，转载请注明出处！'</span>
  <span class="hljs-attr">prev_next:</span>  <span class="hljs-comment"># 文章底部上一篇下一篇功能</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
  <span class="hljs-attr">custom:</span>  <span class="hljs-comment"># 文章底部自定义内容</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">false</span>
    <span class="hljs-attr">content:</span> <span class="hljs-string">'&lt;img src="https://octodex.github.com/images/jetpacktocat.png" class="rounded mx-auto d-block mt-5" style="width:150px; height:150px;"&gt;'</span> <span class="hljs-comment"># 自定义区域，支持 HTML，可自行插入赞赏码、公众号二维码等内容</span>
  <span class="hljs-attr">image_zoom:</span>  <span class="hljs-comment"># 文章图片可点击放大</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>  <span class="hljs-comment"># 开启后文章默认可用，自定义页面如需使用，需在 Front-matter 中指定 `image_zoom: true`，并且图片使用该格式插入：&lt;img src="..." zoom /&gt;</span>
  <span class="hljs-attr">footnote:</span>  <span class="hljs-comment"># 脚注语法，会在文章底部生成脚注，如果 Markdown 渲染器本身支持，则建议关闭，否则可能会冲突</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
  <span class="hljs-attr">math:</span>  <span class="hljs-comment"># 数学公式，开启之前需要更换 Markdown 渲染器，否则复杂公式会有兼容问题，具体请见：https://hexo.fluid-dev.com/docs/guide/##latex-数学公式</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>  <span class="hljs-comment"># 开启后文章默认可用，自定义页面如需使用，需在 Front-matter 中指定 `math: true`</span>
    <span class="hljs-attr">specific:</span> <span class="hljs-literal">false</span>  <span class="hljs-comment"># 开启后，只有在文章 Front-matter 里指定 `math: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度</span>
    <span class="hljs-attr">engine:</span> <span class="hljs-string">mathjax</span>  <span class="hljs-comment"># 公式引擎  available: mathjax | katex</span>
  <span class="hljs-attr">mermaid:</span>  <span class="hljs-comment"># 流程图，基于 mermaid-js，文档：http://mermaid-js.github.io/mermaid/</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">false</span>  <span class="hljs-comment"># 开启后文章默认可用，自定义页面如需使用，需在 Front-matter 中指定 `mermaid: true`</span>
    <span class="hljs-attr">specific:</span> <span class="hljs-literal">false</span>  <span class="hljs-comment"># 开启后，只有在文章 Front-matter 里指定 `mermaid: true` 才会在文章页启动公式转换，以便在页面不包含公式时提高加载速度</span>
    <span class="hljs-attr">options:</span> <span class="hljs-string">&#123;</span> <span class="hljs-attr">theme:</span> <span class="hljs-string">'default'</span> <span class="hljs-string">&#125;</span>  <span class="hljs-comment"># 接口选项，具体可见：http://mermaid-js.github.io/mermaid/#/mermaidAPI</span>
  <span class="hljs-attr">comments:</span>  <span class="hljs-comment"># 评论</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>  <span class="hljs-comment"># 开启评论</span>
    <span class="hljs-attr">type:</span> <span class="hljs-string">valine</span>  <span class="hljs-comment"># 指定使用的评论模块  available: disqus | valine | gitalk | utterances | changyan | livere  推荐 utterances</span>


<span class="hljs-comment">#---------------------------</span>
<span class="hljs-comment"># 评论</span>
<span class="hljs-comment"># Comments</span>
<span class="hljs-comment">#---------------------------</span>

<span class="hljs-comment"># 开启评论需要先在上方 post.comments.enable: true</span>

<span class="hljs-comment"># utterances</span>
<span class="hljs-comment"># You can install utterances with https://utteranc.es/ and generate your configuration</span>
<span class="hljs-attr">utterances:</span>
  <span class="hljs-attr">repo:</span> 
  <span class="hljs-attr">issue_term:</span>
  <span class="hljs-attr">label:</span> <span class="hljs-string">utterances</span>
  <span class="hljs-attr">theme:</span> <span class="hljs-string">github-light</span>
  <span class="hljs-attr">crossorigin:</span> <span class="hljs-string">anonymous</span>

<span class="hljs-comment"># Disqus</span>
<span class="hljs-comment"># 国内用户不要用，已被墙</span>
<span class="hljs-attr">disqus:</span>
  <span class="hljs-attr">shortname:</span> <span class="hljs-comment"># your shortname</span>

<span class="hljs-comment"># Gitalk</span>
<span class="hljs-comment"># You can get yout ClientID and ClientSecret from https://github.com/settings/applications/new</span>
<span class="hljs-comment"># More info available at https://github.com/gitalk/gitalk#options</span>
<span class="hljs-attr">gitalk:</span>
  <span class="hljs-attr">clientID:</span>                     <span class="hljs-comment"># GitHub Application Client ID</span>
  <span class="hljs-attr">clientSecret:</span>                 <span class="hljs-comment"># GitHub Application Client Secret</span>
  <span class="hljs-attr">repo:</span>                         <span class="hljs-comment"># The repo to store comments</span>
  <span class="hljs-attr">owner:</span>                        <span class="hljs-comment"># GitHub repository owner. Can be personal user or organization.</span>
  <span class="hljs-attr">admin:</span>                        <span class="hljs-comment"># GitHub repo owner and collaborators, only these guys can initialize github issues, should be like "['admin']" or "['admin1','admin2']"</span>
  <span class="hljs-attr">id:</span> <span class="hljs-string">location.pathname</span>         <span class="hljs-comment"># The unique id of the page. Length must less than 50.</span>
  <span class="hljs-attr">language:</span> <span class="hljs-string">zh-CN</span>               <span class="hljs-comment"># Localization language key, en, zh-CN and zh-TW are currently available.</span>
  <span class="hljs-attr">labels:</span> <span class="hljs-string">"['Gitalk']"</span>          <span class="hljs-comment"># GitHub issue labels.</span>
  <span class="hljs-attr">perPage:</span> <span class="hljs-number">15</span>                   <span class="hljs-comment"># Pagination size, with maximum 100.</span>
  <span class="hljs-attr">pagerDirection:</span> <span class="hljs-string">last</span>          <span class="hljs-comment"># Comment sorting direction, available values are last and first.</span>
  <span class="hljs-attr">distractionFreeMode:</span> <span class="hljs-literal">false</span>    <span class="hljs-comment"># Facebook-like distraction free mode.</span>
  <span class="hljs-attr">createIssueManually:</span> <span class="hljs-literal">true</span>     <span class="hljs-comment"># By default, Gitalk will create a corresponding github issue for your every single page automatically when the logined user is belong to the admin users. You can create it manually by setting this option to true.</span>

<span class="hljs-comment"># Valine</span>
<span class="hljs-comment"># 完整文档 https://valine.js.org/configuration.html</span>
<span class="hljs-comment"># 注意：下列配置项中的 true/false 不要用引号括起来</span>
<span class="hljs-attr">valine:</span>
  <span class="hljs-attr">appid:</span> <span class="hljs-string">这里填你的appid</span> <span class="hljs-comment"># 从 LeanCloud 的应用中得到的 appId</span>
  <span class="hljs-attr">appkey:</span> <span class="hljs-string">这里填你的appkey</span>     <span class="hljs-comment"># 从 LeanCloud 的应用中得到的 APP Key</span>
  <span class="hljs-attr">placeholder:</span> <span class="hljs-string">说点什么吧！</span> <span class="hljs-comment"># 评论框占位提示符</span>
  <span class="hljs-attr">path:</span> <span class="hljs-string">window.location.pathname</span> <span class="hljs-comment"># 当前文章页路径，用于区分不同的文章页，以保证正确读取该文章页下的评论列表</span>
  <span class="hljs-attr">avatar:</span> <span class="hljs-string">retro</span> <span class="hljs-comment"># Gravatar 头像展示方式</span>
  <span class="hljs-attr">meta:</span> <span class="hljs-string">['nick',</span> <span class="hljs-string">'mail'</span><span class="hljs-string">,</span> <span class="hljs-string">'link'</span><span class="hljs-string">]</span>  <span class="hljs-comment"># 评论者相关属性</span>
  <span class="hljs-attr">pageSize:</span> <span class="hljs-number">10</span> <span class="hljs-comment"># 评论列表分页，每页条数</span>
  <span class="hljs-attr">lang:</span> <span class="hljs-string">zh-CN</span> <span class="hljs-comment"># zh-CN | zh-TW | en | ja</span>
  <span class="hljs-attr">highlight:</span> <span class="hljs-literal">true</span> <span class="hljs-comment"># 代码高亮</span>
  <span class="hljs-attr">recordIP:</span> <span class="hljs-literal">false</span> <span class="hljs-comment"># 是否记录评论者IP</span>
  <span class="hljs-attr">serverURLs:</span>  <span class="hljs-comment"># REST API 服务器地址，国际版不填</span>



<span class="hljs-comment">#---------------------------</span>
<span class="hljs-comment"># 归档页</span>
<span class="hljs-comment"># Archive Page</span>
<span class="hljs-comment">#---------------------------</span>
<span class="hljs-attr">archive:</span>
  <span class="hljs-attr">banner_img:</span> <span class="hljs-string">/img/4.webp</span>
  <span class="hljs-attr">banner_img_height:</span> <span class="hljs-number">60</span>  <span class="hljs-comment"># available: 0 - 100</span>
  <span class="hljs-attr">banner_mask_alpha:</span> <span class="hljs-number">0.3</span>  <span class="hljs-comment"># available: 0 - 1.0</span>
  <span class="hljs-attr">subtitle:</span> <span class="hljs-string">我的归档文章</span> <span class="hljs-comment"># 打字机内容</span>

<span class="hljs-comment">#---------------------------</span>
<span class="hljs-comment"># 分类归档页</span>
<span class="hljs-comment"># Categories Page</span>
<span class="hljs-comment">#---------------------------</span>
<span class="hljs-attr">category:</span>
  <span class="hljs-attr">banner_img:</span> <span class="hljs-string">/img/7.webp</span>
  <span class="hljs-attr">banner_img_height:</span> <span class="hljs-number">60</span>  <span class="hljs-comment"># available: 0 - 100</span>
  <span class="hljs-attr">banner_mask_alpha:</span> <span class="hljs-number">0.3</span>  <span class="hljs-comment"># available: 0 - 1.0</span>
  <span class="hljs-attr">subtitle:</span> <span class="hljs-string">我的分类</span>  <span class="hljs-comment"># 打字机内容</span>
  <span class="hljs-attr">post_limit:</span> <span class="hljs-number">10</span>  <span class="hljs-comment"># 单个分类中折叠展示文章数的最大值，超过限制会显示 More</span>
  <span class="hljs-attr">order_by:</span> <span class="hljs-string">'-length'</span>  <span class="hljs-comment"># 排序字段，前面带减号是倒序，不带减号是正序，可选项：name | length</span>

<span class="hljs-comment">#---------------------------</span>
<span class="hljs-comment"># 标签归档页</span>
<span class="hljs-comment"># Tags Page</span>
<span class="hljs-comment">#---------------------------</span>
<span class="hljs-attr">tag:</span>
  <span class="hljs-attr">banner_img:</span> <span class="hljs-string">/img/5.webp</span>
  <span class="hljs-attr">banner_img_height:</span> <span class="hljs-number">80</span>  <span class="hljs-comment"># available: 0 - 100</span>
  <span class="hljs-attr">banner_mask_alpha:</span> <span class="hljs-number">0.3</span>  <span class="hljs-comment"># available: 0 - 1.0</span>
  <span class="hljs-attr">subtitle:</span>  <span class="hljs-comment"># 打字机内容</span>
  <span class="hljs-attr">tagcloud:</span> <span class="hljs-comment"># 标签云</span>
    <span class="hljs-attr">min_font:</span> <span class="hljs-number">15</span>
    <span class="hljs-attr">max_font:</span> <span class="hljs-number">30</span>
    <span class="hljs-attr">unit:</span> <span class="hljs-string">px</span>  <span class="hljs-comment"># 字号单位</span>
    <span class="hljs-attr">start_color:</span> <span class="hljs-string">"#BBBBEE"</span>
    <span class="hljs-attr">end_color:</span> <span class="hljs-string">"#337ab7"</span>


<span class="hljs-comment">#---------------------------</span>
<span class="hljs-comment"># 关于页</span>
<span class="hljs-comment"># About Page</span>
<span class="hljs-comment">#---------------------------</span>
<span class="hljs-attr">about:</span>  <span class="hljs-comment"># 关于页需要手动创建，具体请见：https://hexo.fluid-dev.com/docs/guide/#%E5%85%B3%E4%BA%8E%E9%A1%B5</span>
  <span class="hljs-attr">banner_img:</span> <span class="hljs-string">/img/2.png</span>
  <span class="hljs-attr">banner_img_height:</span> <span class="hljs-number">60</span>  <span class="hljs-comment"># available: 0 - 100</span>
  <span class="hljs-attr">banner_mask_alpha:</span> <span class="hljs-number">0.3</span>  <span class="hljs-comment"># available: 0 - 1.0</span>
  <span class="hljs-attr">subtitle:</span> <span class="hljs-string">关于我。</span> <span class="hljs-comment"># 打字机内容</span>
  <span class="hljs-attr">avatar:</span> <span class="hljs-string">/img/binblog.png</span> <span class="hljs-comment"># 头像</span>
  <span class="hljs-attr">name:</span> <span class="hljs-string">李斌的个人站点，欢迎学习交流！</span>
  <span class="hljs-attr">introduce:</span> <span class="hljs-string">'努力！工作！'</span>
  <span class="hljs-attr">icons:</span> <span class="hljs-comment"># 更多图标可从 https://hexo.fluid-dev.com/docs/icon/ 查找，class 代表图标的 css class</span>
    <span class="hljs-bullet">-</span> <span class="hljs-string">&#123;</span> <span class="hljs-attr">class:</span> <span class="hljs-string">'iconfont icon-github-fill'</span><span class="hljs-string">,</span> <span class="hljs-attr">link:</span> <span class="hljs-string">'https://github.com/leo-bin'</span><span class="hljs-string">,</span> <span class="hljs-attr">tip:</span> <span class="hljs-string">'GitHub'</span> <span class="hljs-string">&#125;</span>
    <span class="hljs-bullet">-</span> <span class="hljs-string">&#123;</span> <span class="hljs-attr">class:</span> <span class="hljs-string">'iconfont icon-douban-fill'</span><span class="hljs-string">,</span> <span class="hljs-attr">link:</span> <span class="hljs-string">'https://www.douban.com/people/173635353/'</span><span class="hljs-string">,</span> <span class="hljs-attr">tip:</span> <span class="hljs-string">'豆瓣'</span> <span class="hljs-string">&#125;</span>
    <span class="hljs-bullet">-</span> <span class="hljs-string">&#123;</span> <span class="hljs-attr">class:</span> <span class="hljs-string">'iconfont icon-wechat-fill'</span><span class="hljs-string">,</span> <span class="hljs-attr">qrcode:</span> <span class="hljs-string">'/img/微信码.png'</span> <span class="hljs-string">&#125;</span>  <span class="hljs-comment"># 添加 qrcode 后，点击不再跳转，而是悬浮二维码，需要指定 image</span>


<span class="hljs-comment">#---------------------------</span>
<span class="hljs-comment"># 404页</span>
<span class="hljs-comment"># 404 Page</span>
<span class="hljs-comment">#---------------------------</span>
<span class="hljs-attr">page404:</span>
  <span class="hljs-attr">banner_img:</span> <span class="hljs-string">/img/default.png</span>
  <span class="hljs-attr">banner_img_height:</span> <span class="hljs-number">85</span>  <span class="hljs-comment"># available: 0 - 100</span>
  <span class="hljs-attr">banner_mask_alpha:</span> <span class="hljs-number">0.3</span>  <span class="hljs-comment"># available: 0 - 1.0</span>
  <span class="hljs-attr">subtitle:</span> <span class="hljs-string">'Page not found'</span>  <span class="hljs-comment"># 打字机内容</span>


<span class="hljs-comment">#---------------------------</span>
<span class="hljs-comment"># 友链页</span>
<span class="hljs-comment"># Links Page</span>
<span class="hljs-comment">#---------------------------</span>
<span class="hljs-attr">links:</span>
  <span class="hljs-attr">banner_img:</span> <span class="hljs-string">/img/default.png</span>
  <span class="hljs-attr">banner_img_height:</span> <span class="hljs-number">60</span>  <span class="hljs-comment"># available: 0 - 100</span>
  <span class="hljs-attr">banner_mask_alpha:</span> <span class="hljs-number">0.3</span>  <span class="hljs-comment"># available: 0 - 1.0</span>
  <span class="hljs-attr">subtitle:</span>  <span class="hljs-comment"># 打字机内容</span>
  <span class="hljs-attr">items:</span>  <span class="hljs-comment"># intro 与 image 可省略</span>
    <span class="hljs-bullet">-</span> <span class="hljs-string">&#123;</span>
      <span class="hljs-attr">title:</span> <span class="hljs-string">'Fluid Docs'</span><span class="hljs-string">,</span>
      <span class="hljs-attr">intro:</span> <span class="hljs-string">'主题使用指南'</span><span class="hljs-string">,</span>
      <span class="hljs-attr">link:</span> <span class="hljs-string">'https://hexo.fluid-dev.com/docs/'</span><span class="hljs-string">,</span>
      <span class="hljs-attr">image:</span> <span class="hljs-string">'/img/favicon.png'</span>
    <span class="hljs-string">&#125;</span>
    <span class="hljs-bullet">-</span> <span class="hljs-string">&#123;</span>
      <span class="hljs-attr">title:</span> <span class="hljs-string">'Fluid Repo'</span><span class="hljs-string">,</span>
      <span class="hljs-attr">intro:</span> <span class="hljs-string">'主题 GitHub 仓库'</span><span class="hljs-string">,</span>
      <span class="hljs-attr">link:</span> <span class="hljs-string">'https://github.com/fluid-dev/hexo-theme-fluid'</span><span class="hljs-string">,</span>
      <span class="hljs-attr">image:</span> <span class="hljs-string">'/img/favicon.png'</span>
    <span class="hljs-string">&#125;</span>
    <span class="hljs-bullet">-</span> <span class="hljs-string">&#123;</span>
      <span class="hljs-attr">title:</span> <span class="hljs-string">'Fluid Example'</span><span class="hljs-string">,</span>
      <span class="hljs-attr">intro:</span> <span class="hljs-string">'主题操作示例'</span><span class="hljs-string">,</span>
      <span class="hljs-attr">link:</span> <span class="hljs-string">'https://hexo.fluid-dev.com/docs/example/'</span><span class="hljs-string">,</span>
      <span class="hljs-attr">image:</span> <span class="hljs-string">'/img/favicon.png'</span>
    <span class="hljs-string">&#125;</span></code></pre></div>
<p>这里需要说明几点</p>
<p>首先是配置文件中出现的图片的地址，就是：/img/xxx.jpg</p>
<p>这个文件夹在这里：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714095008024.png" srcset="/binblog/img/loading.gif" alt="image-20200714095008024"></p>
<p>大家可以把一些配置的图片都放在这里。</p>
<p>还有就是这里面出现的appid和appkey啥的，这个是用来记录访客和浏览记录的，当然还有评论系统。</p>
<p>这里先空着，下面再说。</p>
<p>其他的配置大家照着葫芦画瓢就行，问题不大的。</p>
<h2 id="整合图床"><a href="#整合图床" class="headerlink" title="整合图床"></a>整合图床</h2><p>ok，到这里我们就完成了一大半了，剩下的就要开始写文章啦 。</p>
<p>我们先用Typora打开Hello World文件进行编辑：</p>
<p>路径在这里：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714100830449.png" srcset="/binblog/img/loading.gif" alt="image-20200714100830449"></p>
<p>打开之后是这样子的：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714100909850.png" srcset="/binblog/img/loading.gif" alt="image-20200714100909850"></p>
<p>我改了一些内容，可以看到界面十分清爽，一般写博客我就直接用Markdown的语法，非常的方便。</p>
<p>但是呢，我们如果要加上一些图片，在哪里放我们的图片资源呢？</p>
<p>这里就需要一个图床啦！</p>
<p>图床有很多，这里用的是阿里云的OSS，免费创建的</p>
<p>这里主要讲下如何将Typora整合OSS，实现一键上传图片并生成有效链接：</p>
<p>实现效果如下：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714101438207.png" srcset="/binblog/img/loading.gif" alt="image-20200714101438207"></p>
<p><strong>上传之后的图片链接已经变了：</strong></p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714101526003.png" srcset="/binblog/img/loading.gif" alt="image-20200714101526003"></p>
<p>是不是很方便？</p>
<p>在这之前你需要先下载<strong>PicGO</strong>：   </p>
<p><a href="https://github.com/Molunerfinn/PicGo/releases" target="_blank" rel="noopener">https://github.com/Molunerfinn/PicGo/releases</a></p>
<p>同样的找到一个合适的压缩包：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714101939163.png" srcset="/binblog/img/loading.gif" alt="image-20200714101939163"></p>
<p>直接安装就行，打开之后是这样子的：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714102019482.png" srcset="/binblog/img/loading.gif" alt="image-20200714102019482"></p>
<p>可以看到十分的方便，直接拖拽图片就可以上传了，而且它内部支持非常多的第三方图床提供商</p>
<p>我们点开图床设置，选择阿里云OSS，填上我们在OSS上面创建的信息，之后点确认就行。</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714102212496.png" srcset="/binblog/img/loading.gif" alt="image-20200714102212496"></p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714102310696.png" srcset="/binblog/img/loading.gif" alt="image-20200714102310696"></p>
<p>之后我们就可以在线管理我们的相册啦</p>
<p>支持一键复制图片链接。</p>
<p>但是这还不够，我们还要和我们的Typora进行整合：</p>
<p>我们找到文件—&gt;找到偏好设置：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714102540107.png" srcset="/binblog/img/loading.gif" alt="image-20200714102540107"></p>
<p>直接设置PicGo所在的位置就行：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714102649339.png" srcset="/binblog/img/loading.gif" alt="image-20200714102649339"></p>
<p>ok，至此，你的编辑器就已经能够实现一键上传图片啦！</p>
<h2 id="整合评论系统"><a href="#整合评论系统" class="headerlink" title="整合评论系统"></a>整合评论系统</h2><p>现在我们回过头来看上面留下来的问题，就是那个appid和appkey</p>
<p>这个其实就是用来整合评论系统和浏览访客统计的。</p>
<p>这里需要用到第三方云存储，这里推荐一个免费的云服务提供商：<a href="https://www.leancloud.cn/" target="_blank" rel="noopener">https://www.leancloud.cn/</a></p>
<p>先注册一个账号，然后进入控制台，然后直接创建一个应用：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714102946934.png" srcset="/binblog/img/loading.gif" alt="image-20200714102946934"></p>
<p>创建之后我们进入这个应用，找到设置中的key：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714103142329.png" srcset="/binblog/img/loading.gif" alt="image-20200714103142329"></p>
<p>ok，这里就是我们刚刚提到的appid和appkey啦，复制之前的配置文件中就行啦！</p>
<p>这里还有一个服务器地址不用记了。。。没啥用</p>
<h2 id="美化你的博客"><a href="#美化你的博客" class="headerlink" title="美化你的博客"></a>美化你的博客</h2><p>这里我还加了一个看板娘，就是博客上面那个铝孩纸，具体配置如下:</p>
<p>我们先去人家项目地址找一个自己喜欢的看板娘：</p>
<p>预览地址：<a href="https://huaji8.top/post/live2d-plugin-2.0/" target="_blank" rel="noopener">https://huaji8.top/post/live2d-plugin-2.0/</a></p>
<p>下载方式：</p>
<p>直接使用npm命令就可以安装live2d模块就行了</p>
<div class="hljs"><pre><code class="hljs bash">npm install --save hexo-helper-live2d</code></pre></div>
<p>然后根据我们找到的看板娘的名字获取相应的模型：</p>
<div class="hljs"><pre><code class="hljs bash">npm install koharu</code></pre></div>
<p>然后打开<strong>核心配置文件</strong>添加如下的配置：</p>
<div class="hljs"><pre><code class="hljs yaml"><span class="hljs-attr">live2d:</span>
  <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
  <span class="hljs-attr">scriptFrom:</span> <span class="hljs-string">local</span>
  <span class="hljs-attr">model:</span> 
    <span class="hljs-attr">use:</span> <span class="hljs-string">live2d-widget-model-koharu</span> <span class="hljs-comment">#模型选择，名字记得和下载的一致</span>
  <span class="hljs-attr">display:</span> 
    <span class="hljs-attr">position:</span> <span class="hljs-string">right</span>  <span class="hljs-comment">#模型位置</span>
    <span class="hljs-attr">width:</span> <span class="hljs-number">150</span>       <span class="hljs-comment">#模型宽度</span>
    <span class="hljs-attr">height:</span> <span class="hljs-number">300</span>      <span class="hljs-comment">#模型高度</span>
  <span class="hljs-attr">mobile:</span> 
    <span class="hljs-attr">show:</span> <span class="hljs-literal">true</span>      <span class="hljs-comment">#是否在手机端显示</span></code></pre></div>
<p>最后打开这个<strong>packge.json</strong>文件</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714103708916.png" srcset="/binblog/img/loading.gif" alt="image-20200714103708916"></p>
<p>配置如下，一般都只要改下依赖那块就行：</p>
<div class="hljs"><pre><code class="hljs json">&#123;
  <span class="hljs-attr">"name"</span>: <span class="hljs-string">"hexo-site"</span>,
  <span class="hljs-attr">"version"</span>: <span class="hljs-string">"0.0.0"</span>,
  <span class="hljs-attr">"private"</span>: <span class="hljs-literal">true</span>,
  <span class="hljs-attr">"scripts"</span>: &#123;
    <span class="hljs-attr">"build"</span>: <span class="hljs-string">"hexo generate"</span>,
    <span class="hljs-attr">"clean"</span>: <span class="hljs-string">"hexo clean"</span>,
    <span class="hljs-attr">"deploy"</span>: <span class="hljs-string">"hexo deploy"</span>,
    <span class="hljs-attr">"server"</span>: <span class="hljs-string">"hexo server"</span>
  &#125;,
  <span class="hljs-attr">"hexo"</span>: &#123;
    <span class="hljs-attr">"version"</span>: <span class="hljs-string">"4.2.1"</span>
  &#125;,
  <span class="hljs-attr">"dependencies"</span>: &#123;
    <span class="hljs-attr">"hexo"</span>: <span class="hljs-string">"^4.2.1"</span>,
    <span class="hljs-attr">"hexo-deployer-git"</span>: <span class="hljs-string">"^2.1.0"</span>,
    <span class="hljs-attr">"hexo-generator-archive"</span>: <span class="hljs-string">"^1.0.0"</span>,
    <span class="hljs-attr">"hexo-generator-category"</span>: <span class="hljs-string">"^1.0.0"</span>,
    <span class="hljs-attr">"hexo-generator-index"</span>: <span class="hljs-string">"^1.0.0"</span>,
    <span class="hljs-attr">"hexo-generator-tag"</span>: <span class="hljs-string">"^1.0.0"</span>,
    <span class="hljs-attr">"hexo-helper-live2d"</span>: <span class="hljs-string">"^3.1.1"</span>,
    <span class="hljs-attr">"hexo-renderer-ejs"</span>: <span class="hljs-string">"^1.0.0"</span>,
    <span class="hljs-attr">"hexo-renderer-kramed"</span>: <span class="hljs-string">"^0.1.4"</span>,
    <span class="hljs-attr">"hexo-renderer-stylus"</span>: <span class="hljs-string">"^1.1.0"</span>,
    <span class="hljs-attr">"hexo-server"</span>: <span class="hljs-string">"^1.0.0"</span>,
    <span class="hljs-attr">"live2d-widget-model-koharu"</span>: <span class="hljs-string">"^1.0.5"</span>,
    <span class="hljs-attr">"live2d-widget-model-tororo"</span>: <span class="hljs-string">"^1.0.5"</span>
  &#125;
&#125;</code></pre></div>
<p>当然还有很多美化的地方啦，大家可以参考这篇博客：</p>
<p><a href="https://blog.csdn.net/qq_36759224/article/details/85420403?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase&amp;depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase" target="_blank" rel="noopener">https://blog.csdn.net/qq_36759224/article/details/85420403?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase&amp;depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase</a></p>
<h2 id="写文章"><a href="#写文章" class="headerlink" title="写文章"></a>写文章</h2><p>打开cmd（管理员模式下），然后定位到我们的hexo文件的根目录下，如下：</p>
<p>然后执行以下命令就可以创建一篇md文章啦：</p>
<div class="hljs"><pre><code class="hljs bash">hexo new <span class="hljs-string">'文章标题'</span></code></pre></div>
<p><strong>看看效果：</strong></p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714105606671.png" srcset="/binblog/img/loading.gif" alt="image-20200714105606671"></p>
<p>根据提示找到文章的路径，然后你就可以使用Typora或者记事本进行写文章啦！</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714105757854.png" srcset="/binblog/img/loading.gif" alt="image-20200714105757854"></p>
<p>这里教大家如何给文章添加预览图片和分类：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714105842602.png" srcset="/binblog/img/loading.gif" alt="image-20200714105842602"></p>
<p><strong>很简单，只要加上index_img和categories就行啦！</strong></p>
<h2 id="部署你的博客"><a href="#部署你的博客" class="headerlink" title="部署你的博客"></a>部署你的博客</h2><p><strong>ok，现在所有前期工作都做好啦，现在要开始部署啦！</strong></p>
<p>首先要知道几个组合命令：</p>
<div class="hljs"><pre><code class="hljs bash">hexo s -g <span class="hljs-comment">#生成并本地预览</span>
hexo d -g <span class="hljs-comment">#生成并上传至服务器</span></code></pre></div>
<p>我们一般用的就是第二个，就是先编译然上传至码云：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714110327011.png" srcset="/binblog/img/loading.gif" alt="image-20200714110327011"></p>
<p>出现这个就是成功了</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714110345965.png" srcset="/binblog/img/loading.gif" alt="image-20200714110345965"></p>
<p>我们去仓库上面看下：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714110422985.png" srcset="/binblog/img/loading.gif" alt="image-20200714110422985"></p>
<p>是不是有了内容了？</p>
<p>ok，我们开始部署！</p>
<p>先找到服务，然后点开Gitee Pages！</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714110542254.png" srcset="/binblog/img/loading.gif" alt="image-20200714110542254"></p>
<p>什么都不用改，勾上强制使用Https，然后点击更新并部署就行！</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714110656982.png" srcset="/binblog/img/loading.gif" alt="image-20200714110656982"></p>
<p>部署成功之后我们点进去：</p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714110823156.png" srcset="/binblog/img/loading.gif" alt="image-20200714110823156"></p>
<p><img src="https://bins-pic.oss-cn-shanghai.aliyuncs.com/mypic/image-20200714110928383.png" srcset="/binblog/img/loading.gif" alt="image-20200714110928383"></p>
<p><strong>ok！大公告成！！</strong></p>
<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><a href="https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html" target="_blank" rel="noopener">https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html</a></p>
<p><a href="https://blog.csdn.net/wsmrzx/article/details/81478945" target="_blank" rel="noopener">https://blog.csdn.net/wsmrzx/article/details/81478945</a></p>
<p><a href="https://www.jianshu.com/p/f4658df66a15" target="_blank" rel="noopener">https://www.jianshu.com/p/f4658df66a15</a></p>

            </article>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/binblog/categories/%E6%8A%80%E6%9C%AF%E6%94%B6%E8%97%8F/">技术收藏</a>
                    
                  </div>
                
                
              </div>
              
                <p class="note note-warning">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" target="_blank" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！</p>
              
              
                <div class="post-prevnext row">
                  <div class="post-prev col-6">
                    
                    
                      <a href="/binblog/2020/07/16/%E5%B8%B8%E7%94%A8%E7%AE%97%E6%B3%95%E4%B9%8B%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95%E5%92%8C%E6%9F%A5%E6%89%BE%E7%AE%97%E6%B3%95/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">常用算法之排序算法和查找算法</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </div>
                  <div class="post-next col-6">
                    
                    
                      <a href="/binblog/2020/07/07/%E5%A6%82%E4%BD%95%E4%BB%BF%E7%85%A7Redisson%E5%AE%9E%E7%8E%B0%E5%88%86%E5%B8%83%E5%BC%8F%E9%94%81/">
                        <span class="hidden-mobile">仿照Redisson实现一个简易版分布式锁</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </div>
                </div>
              
            </div>

            
              <!-- Comments -->
              <div class="comments" id="comments">
                
                
  <div id="vcomments"></div>
  <script defer src="https://cdn.staticfile.org/valine/1.4.14/Valine.min.js" ></script>

  <script type="text/javascript">
    var oldLoadVa = window.onload;
    window.onload = function () {
      oldLoadVa && oldLoadVa();

      new Valine({
        el: "#vcomments",
        app_id: "vsanVmkaurLHyq2Xey9odo5V-gzGzoHsz",
        app_key: "v2hMMe4Mzz3mqpy9jwd7qx8B",
        placeholder: "说点什么吧！",
        path: window.location.pathname,
        avatar: "retro",
        meta: ["nick","mail","link"],
        pageSize: "10",
        lang: "zh-CN",
        highlight: true,
        recordIP: false,
        serverURLs: "",
      });
    };
  </script>
  <noscript>Please enable JavaScript to view the <a href="https://valine.js.org" target="_blank" rel="nofollow noopener noopener">comments
      powered by Valine.</a></noscript>


              </div>
            
          </div>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div id="tocbot"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    
  </main>

  
    <a id="scroll-top-button" href="#" role="button">
      <i class="iconfont icon-arrowup" aria-hidden="true"></i>
    </a>
  

  
    <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
  

  

  

  <footer class="mt-5">
  <div class="text-center py-3">
    <div>
      <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
      <i class="iconfont icon-love"></i>
      <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener">
        <span>Fluid</span></a>
    </div>
    
  <div class="statistics">
    
    

    
      
        <!-- LeanCloud 统计PV -->
        <span id="leancloud-site-pv-container" style="display: none">
            总访问量 
            <span id="leancloud-site-pv"></span>
             次
          </span>
      
      
        <!-- LeanCloud 统计UV -->
        <span id="leancloud-site-uv-container" style="display: none">
            总访客数 
            <span id="leancloud-site-uv"></span>
             人
          </span>
      

    
  </div>


    
  <!-- 备案信息 -->
  <div class="beian">
    <a href="http://beian.miit.gov.cn/" target="_blank"
       rel="nofollow noopener">京ICP证123456号</a>
    
      <a
        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12345678"
        rel="nofollow noopener"
        class="beian-police"
        target="_blank"
      >
        <span class="beian-police-sep">&nbsp;|&nbsp;</span>
        
          <img src="/binblog/img/police_beian.png" srcset="/binblog/img/loading.gif" alt="police-icon" />
        
        <span>京公网安备12345678号</span>
      </a>
     
  </div>


    
  </div>
</footer>

<!-- SCRIPTS -->
<script  src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" ></script>
<script  src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script  src="/binblog/js/debouncer.js" ></script>
<script  src="/binblog/js/main.js" ></script>

<!-- Plugins -->


  
    <script  src="/binblog/js/lazyload.js" ></script>
  



  <script defer src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js" ></script>
  <script  src="/binblog/js/clipboard-use.js" ></script>



  <script defer>
  (function () {
    // 查询存储的记录
    function getRecord(Counter, target) {
      return new Promise(function (resolve, reject) {
        Counter('get', '/classes/Counter?where=' + encodeURIComponent(JSON.stringify({target})))
          .then(resp => resp.json())
          .then(({results, code, error}) => {
            if (code === 401) {
              throw error;
            }
            if (results && results.length > 0) {
              var record = results[0];
              resolve(record);
            } else {
              Counter('post', '/classes/Counter', {target, time: 0})
                .then(resp => resp.json())
                .then((record, error) => {
                  if (error) {
                    throw error;
                  }
                  resolve(record);
                }).catch(error => {
                console.error('Failed to create', error);
                reject(error);
              });
            }
          }).catch((error) => {
          console.error('LeanCloud Counter Error:', error);
          reject(error);
        });
      })
    }

    // 发起自增请求
    function increment(Counter, incrArr) {
      return new Promise(function (resolve, reject) {
        Counter('post', '/batch', {
          "requests": incrArr
        }).then((res) => {
          res = res.json();
          if (res.error) {
            throw res.error;
          }
          resolve(res);
        }).catch((error) => {
          console.error('Failed to save visitor count', error);
          reject(error);
        });
      });
    }

    // 构建自增请求体
    function buildIncrement(objectId) {
      return {
        "method": "PUT",
        "path": `/1.1/classes/Counter/${ objectId }`,
        "body": {
          "time": {
            '__op': 'Increment',
            'amount': 1
          }
        }
      }
    }

    // 校验是否为有效的 UV
    function validUV() {
      var key = 'LeanCloud_UV_Flag';
      var flag = localStorage.getItem(key);
      if (flag) {
        // 距离标记小于 24 小时则不计为 UV
        if (new Date().getTime() - parseInt(flag) <= 86400000) {
          return false;
        }
      }
      localStorage.setItem(key, new Date().getTime().toString());
      return true;
    }

    function addCount(Counter) {
      var enableIncr = 'true' === 'true' && window.location.hostname !== 'localhost';
      var getterArr = [];
      var incrArr = [];

      // 请求 PV 并自增
      var pvCtn = document.querySelector('#leancloud-site-pv-container');
      if (pvCtn || enableIncr) {
        var pvGetter = getRecord(Counter, 'site-pv').then((record) => {
          incrArr.push(buildIncrement(record.objectId))
          var ele = document.querySelector('#leancloud-site-pv');
          if (ele) {
            ele.innerText = record.time + 1;
            if (pvCtn) {
              pvCtn.style.display = 'inline';
            }
          }
        });
        getterArr.push(pvGetter);
      }

      // 请求 UV 并自增
      var uvCtn = document.querySelector('#leancloud-site-uv-container');
      if (uvCtn || enableIncr) {
        var uvGetter = getRecord(Counter, 'site-uv').then((record) => {
          var vuv = validUV();
          vuv && incrArr.push(buildIncrement(record.objectId))
          var ele = document.querySelector('#leancloud-site-uv');
          if (ele) {
            ele.innerText = record.time + (vuv ? 1 : 0);
            if (uvCtn) {
              uvCtn.style.display = 'inline';
            }
          }
        });
        getterArr.push(uvGetter);
      }

      // 如果是文章，请求文章的浏览数，并自增
      if ('true' === 'true') {
        var viewCtn = document.querySelector('#leancloud-post-views-container');
        if (viewCtn || enableIncr) {
          var target = decodeURI('/binblog/2020/07/13/%E5%A6%82%E4%BD%95%E6%89%93%E9%80%A0%E6%B0%B8%E4%B9%85%E5%B8%A6%E5%9F%9F%E5%90%8D%E4%B8%AA%E4%BA%BA%E4%B8%93%E5%B1%9E%E5%8D%9A%E5%AE%A2/');
          var viewGetter = getRecord(Counter, target).then((record) => {
            incrArr.push(buildIncrement(record.objectId))
            if (viewCtn) {
              var ele = document.querySelector('#leancloud-post-views');
              if (ele) {
                ele.innerText = (record.time || 0) + 1;
                viewCtn.style.display = 'inline';
              }
            }
          });
          getterArr.push(viewGetter);
        }
      }

      // 如果启动计数自增，批量发起自增请求
      if (enableIncr) {
        Promise.all(getterArr).then(() => {
          incrArr.length > 0 && increment(Counter, incrArr);
        })
      }
    }

    var app_id = 'vsanVmkaurLHyq2Xey9odo5V-gzGzoHsz'
    var app_key = 'v2hMMe4Mzz3mqpy9jwd7qx8B'
    var server_url = ''

    function fetchData(api_server) {
      var Counter = (method, url, data) => {
        return fetch(`${ api_server }/1.1${ url }`, {
          method,
          headers: {
            'X-LC-Id': app_id,
            'X-LC-Key': app_key,
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(data)
        });
      };

      addCount(Counter);
    }

    var api_server = app_id.slice(-9) !== '-MdYXbMMI' ? server_url : `https://${ app_id.slice(0, 8).toLowerCase() }.api.lncldglobal.com`;

    if (api_server) {
      fetchData(api_server);
    } else {
      fetch('https://app-router.leancloud.cn/2/route?appId=' + app_id)
        .then(resp => resp.json())
        .then(({api_server}) => {
          fetchData('https://' + api_server);
        });
    }
  })();
</script>






  <script  src="https://cdn.staticfile.org/tocbot/4.11.1/tocbot.min.js" ></script>
  <script>
    $(document).ready(function () {
      var boardCtn = $('#board-ctn');
      var boardTop = boardCtn.offset().top;

      tocbot.init({
        tocSelector: '#tocbot',
        contentSelector: 'article.markdown-body',
        headingSelector: 'h1,h2,h3,h4,h5,h6',
        linkClass: 'tocbot-link',
        activeLinkClass: 'tocbot-active-link',
        listClass: 'tocbot-list',
        isCollapsedClass: 'tocbot-is-collapsed',
        collapsibleClass: 'tocbot-is-collapsible',
        collapseDepth: 0,
        scrollSmooth: true,
        headingsOffset: -boardTop
      });
      if ($('.toc-list-item').length > 0) {
        $('#toc').css('visibility', 'visible');
      }
    });
  </script>



  <script  src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js" ></script>
  <script>
    var typed = new Typed('#subtitle', {
      strings: [
        '  ',
        "如何打造带域名的永久个人专属博客&nbsp;",
      ],
      cursorChar: "_",
      typeSpeed: 70,
      loop: false,
    });
    typed.stop();
    $(document).ready(function () {
      $(".typed-cursor").addClass("h2");
      typed.start();
    });
  </script>



  <script  src="https://cdn.staticfile.org/anchor-js/4.2.2/anchor.min.js" ></script>
  <script>
    anchors.options = {
      placement: "right",
      visible: "hover",
      
    };
    var el = "h1,h2,h3,h4,h5,h6".split(",");
    var res = [];
    for (item of el) {
      res.push(".markdown-body > " + item)
    }
    anchors.add(res.join(", "))
  </script>



  <script  src="/binblog/js/local-search.js" ></script>
  <script>
    var path = "/binblog/local-search.xml";
    var inputArea = document.querySelector("#local-search-input");
    inputArea.onclick = function () {
      searchFunc(path, 'local-search-input', 'local-search-result');
      this.onclick = null
    }
  </script>



  <script  src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />

  <script>
    $('#post img:not(.no-zoom img, img[no-zoom]), img[zoom]').each(
      function () {
        var element = document.createElement('a');
        $(element).attr('data-fancybox', 'images');
        $(element).attr('href', $(this).attr('src'));
        $(this).wrap(element);
      }
    );
  </script>





  

  
    <!-- MathJax -->
    <script>
      MathJax = {
        tex: {
          inlineMath: [['$', '$'], ['\\(', '\\)']]
        },
        options: {
          renderActions: {
            findScript: [10, doc => {
              document.querySelectorAll('script[type^="math/tex"]').forEach(node => {
                const display = !!node.type.match(/; *mode=display/);
                const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], display);
                const text = document.createTextNode('');
                node.parentNode.replaceChild(text, node);
                math.start = { node: text, delim: '', n: 0 };
                math.end = { node: text, delim: '', n: 0 };
                doc.math.push(math);
              });
            }, '', false],
            insertedScript: [200, () => {
              document.querySelectorAll('mjx-container').forEach(node => {
                let target = node.parentNode;
                if (target.nodeName.toLowerCase() === 'li') {
                  target.parentNode.classList.add('has-jax');
                }
              });
            }, '', false]
          }
        }
      };
    </script>

    <script async src="https://cdn.staticfile.org/mathjax/3.0.5/es5/tex-svg.js" ></script>

  













  

  

  

  

  

  





<script src="/binblog/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"model":{"jsonPath":"/binblog/live2dw/assets/koharu.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body>
</html>
